modern.IE 是微軟新推出的一套免費的瀏覽器測試工具長久以來，瀏覽器兼容性測試一直是困擾前端工程師的工作之一。雖然隨著IE9的普及和IE10的發布，這項工作變的越來越輕松，但是舊版本的IE瀏覽器仍然占據了較多的市場份額，微軟此時推出modern.IE網站，顯然是想推動網絡更快的向前發展。

modern.IE平臺可分為兩個部分：一個是用于檢測常見代碼問題的Web掃描工具，另一個是與BrowserStack合作的免費虛擬測試服務。

一個代碼檢測向導

代碼掃描其實并不是新鮮事物，說到 Web掃描工具，開發者們肯定會想到另外兩款產品 —— PageSpeed和 YSlow。PageSpeed和YSlow分別是Google和Yahoo推出的網站性能測試工具。2款產品都是通過檢測代碼分析網站性能，檢測的規則主要是JavaScript與CSS文件優化、圖片壓縮和減少服務器請求和查詢，優化的最終目的是提高網頁加載速度。

但modern.IE與眾不同地方在于，它專注于那些可能會導致舊版本IE瀏覽器出現問題的代碼，是以解決瀏覽器兼容性為最終目標的檢測工具。只需要幾秒時間，modern.IE 就能掃描一個網頁并創建一份報告，其中羅列了可能會導致兼容性問題或影響用戶體驗的常見錯誤。

代碼檢測向導目前支持3類共10種常見問題：

(一)解決關于兼容舊版IE的常見問題

自從新版的IE9與IE10開始支持HTML5標準，而舊版本的IE卻不支持，開發者通常需要為兩者編寫不同的代碼。這使得測試不同版本的IE變得非常棘手 —— 比如找出兼容模式下不支持的特性、讓docmode告訴瀏覽器它支持web標準、不小心使用了一個過時的jQuery框架。如果網站在最新版或預發行版中會引發兼容性問題，modern.IE也會提示您，使開發者可以更從容的在不同的版本間規劃和解決問題。

• 已知的兼容性問題（Known compatibility issues）
• 兼容模式（Compatibility Mode）
• 框架和庫（Frameworks & libraries）
• 網絡標準文檔模式（Web standards docmode）

(二)幫助網站在多種瀏覽器和設備上正常運行

向導還包括了一系列最佳實踐，讓網頁可以適用于日益增加的各種設備 —— 不論是手機、臺式機、平板電腦，甚至是大屏幕電視。

實施特性檢測、采用CSS前綴的最佳實踐編碼、搭建無插件網站、使用響應式網頁設計，都可以減少跨瀏覽器、跨設備的測試時間，并提供更穩定的用戶體驗。

• CSS 前綴（CSS-prefixes）
• 瀏覽器插件（Browser plug-ins）
• 響應式網頁設計（Responsive web design）
• 瀏覽器檢測（Browser detection）

(三)結合Windows 8 中的一些新特性構建網站

這包括觸控瀏覽和“開始”屏幕網站磁貼。開發者可利用Windows的這些新功能，為用戶提供更加個性化的瀏覽體驗。

• 觸控瀏覽（Touch-browsing）
• “開始”屏幕網站磁貼（Start screen site tile）

這里以某網站網站為例，介紹modern.IE的使用方法。

打開modern.IE的網站首頁，在頁面的下方就可以看到一個碩大輸入框。

輸入網址，點擊Scan按鈕。網頁就會跳轉到掃描頁面，并開始掃描。

只需數秒，網站報告就會生成到頁面上。

報告一共分為3大類10條規則，點擊條目可以展開對應的詳細信息，詳細信息中可以看到該規則的問題原因、重要性和解決方法。
如果規則前的圖標是對勾，則表示網站符合該條規則。如果圖標是感嘆號，那么就有問題需要您完善了。
某網站一共掃描出了5個需要改進的規則，我們來一個個看下。

第一個規則是“框架和庫”（Frameworks & libraries）

在這條規則中，modern.IE發現網站使用了過時的jQuery庫版本，所以會建議您應該升級庫的最接近的兼容版本（需要少許測試）或是最新版本（需要更多測試）。

第二個規則是“Web標準的 docmode”（Web standards docmode）

modern.IE 發現網站沒有使用DocType，從而可能使網站無法在IE9或IE10中獲的最好的體驗。使用DocType，可以在IE瀏覽器中提升30%的網站性能。

如何修復？詳細信息的最右邊給出了解決方法的鏈接。

第三個規則是”響應式網頁設計”（Responsive web design）

網站沒有使用響應式設計，這不是個技術錯誤，但是應用這項技術可以提升用戶體驗，減少為特定設備開發的支出。所以，moderen.IE給出的建議是“建議增強”。并給出了3條學習響應式網頁設計的鏈接。

最后2條規則是關于結合Windows 8新特性構建網站

Windows 8 有2個和網站相關的新特性，觸控瀏覽和“開始”屏幕網站磁貼。開發者利用Windows的這些新功能，可以為用戶提供更加個性化的瀏覽體驗。
如何實現？右側依舊給出了詳細的教程鏈接。

通過modern.IE檢測，開發人員就可以輕松地了解網頁存在的問題，從而有針對性的一步步完善您的網站，相信完善后的網站一定會擁有優秀的瀏覽器兼容性，用戶體驗也更上一個層級。

BrowserStack免費虛擬測試服務

以前開發者要測試不同設備上的瀏覽器，需要自己維護測試設備或者映像，而且瀏覽器版本太多，您也不可能擁有每種設備和瀏覽器。

而BrowserStack 是一個云服務，這意味著開發者不再需要花費心思在維護自己的測試設備和映像上，不論開發人員使用何種設備或操作系統，通過BrowserStack，開發人員可以像訪問網頁一樣輕松的進行測瀏覽器兼容性測試，通過瀏覽器就可以遠程操作各個系統上的不同瀏覽器。

打開modern.IE中的虛擬工具頁面，在左側的BrowserStack模塊中輸入要測試的網址，點擊右側按鈕就會跳轉到BrowserStack的注冊頁面.

只需簡單的填寫郵箱、密碼和昵稱就注冊好了。

然后就會自動跳轉到測試頁面，等待幾秒，讓網頁加載Flash并連接云端服務器。

等待連接成功，您就能在右側看到頁面了，默認連接的是Windows 8下的IE10瀏覽器。

接著您就可以像平時瀏覽網頁一樣操控頁面了。

如果您想測試其他系統的瀏覽器，比如Windows Vista下的IE9，就可以在左側的面板中依次選擇系統和瀏覽器，然后點擊Update，更新服務器。

您也可以調出IE自帶的F12開發人員工具對網頁進行調試。

OS X和Android的瀏覽器也都可以云端測試。

您還可以在左側設置分辨率，是否全屏、自適應和加載速度。
如果您的測試網站無法公開訪問，您也可以通過基于Java的安全隧道，使用BrowserStack的本地服務器測試。modren.IE還推出了面向Chrome和Firefox的加載項，這樣在這些瀏覽器中就能輕松地對IE進行兼容性測試。

現在，modern.IE和BrowserStack合作，為所有通過modern.IE連接此服務的Web開發人員提供三個月的免費服務。
此外，modern.IE也為開發人員提供了不論是在 Mac、Linux、PC下都能使用的本地端Windows IE瀏覽器的免費虛擬映像，用來進行測試。
如果您正為測試瀏覽器兼容性而煩惱的話，就快來試試modern.IE 吧！

================關于優設網================
“優設網uisdc.com”是一個分享網頁設計、無線端設計以及PS教程的干貨網站。

特色推薦：
設計講座：定期邀請國內互聯網公司的設計前輩及行業總監在群內及YY語音（YY頻道：15335158）分享實戰經驗。
設計微博：我們擁有粉絲量25萬的人氣微博@優秀網頁設計 ，歡迎大家關注及時獲取設計資源。
設計導航：史上最贊最全面的設計師網址導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的”福利”嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您還可以掃描下方二維碼快速添加：